import React, { useState } from 'react';
import { Divider, Radio, Table, Button, Modal, Form, Input, DatePicker, Pagination, Space, Breadcrumb, Card } from 'antd';
import { FormOutlined, DeleteOutlined, ContainerOutlined, PlusOutlined } from '@ant-design/icons'
import axios from 'axios'
import '../../style/Outbreak.scss'
import { useEffect } from 'react';
// 导入封装的请求
import { add, delete_map, post_map, patch_map } from '../../utils/api2'
import { useNavigate } from 'react-router-dom';
function Outbreak(props) {
    // 定义一个状态用来接收后端返回的数据
    const [news, setNews] = useState([])
    // 定义路由跳转
    const push = useNavigate()
    // 定义form表单
    const [form] = Form.useForm()
    // 定义文本框
    const { TextArea } = Input;
    // 定义搜索框
    const { Search } = Input;
    // 定义分页
    const [pagination, Setpagination] = useState({
        current: 1,
        pageSize: 4,
        total: 20
    })
    // 定义生命周期，在生命周期里面发请求获取数据
    useEffect(() => {
        // 渲染初始列表
        add().then((res) => {
            console.log(res.data)
            setNews(res.data)
            Setpagination({ current: pagination.current, pageSize: 5, total: res.data.length })
        })
    }, [])
    // 设置分页事件
    const handpagination = (pagination) => {
        Setpagination(pagination)
        add().then((res) => {
            console.log(res.data)
            setNews(res.data)
            Setpagination({ current: pagination.current, pageSize: 5, total: res.data.length })
        })
    }
    // 设置每一列的数据
    const columns = [
        {
            title: '序列号',
            dataIndex: 'id',
        },
        {
            title: '主题',
            dataIndex: 'name',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '通知',
            dataIndex: 'context',
        },
        {
            title: '发布者',
            dataIndex: 'people',
        },
        {
            title: '时间',
            dataIndex: 'time',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <>
                    <i className='iconfont icon-delete' style={{ margin: "8px" }} onClick={() => onedit(record)}><FormOutlined /></i>
                    <i className='iconfont icon-delete' style={{ margin: "8px" }} onClick={() => onlook(record)}><ContainerOutlined /></i>
                    <i className='iconfont icon-delete' style={{ margin: "8px" }} onClick={() => ondel(record)}><DeleteOutlined /></i>
                </>
            ),
        }
    ];
    // 设置每一行数据
    const data = news
    // 删除通告
    const ondel = (record) => {
        console.log(record)
        delete_map(record.id).then((res) => {
            console.log(res.data)
        })
        add().then((res) => {
            setNews(res.data)
        })
    }
    // 具体通告信息
    const onlook = (record) => {
        push(`/index/detail/${record.id}`)
        console.log(record)
    }
    // 用来存储被选择中的数据的key值
    const [selectedRowKeys, SetselectedRowsKeys] = useState([])
    // 多选框的选择
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            SetselectedRowsKeys(selectedRowKeys)
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    //设置是复选框还是单选框
    const [selectionType, setSelectionType] = useState('checkbox');
    // 设置弹出框的布尔值，根据布尔值进行弹出或者隐藏
    const [open, setOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const [modalText, setModalText] = useState('Content of the modal');
    const onedit = (record) => {
        setOpen(true);
        form.setFieldsValue(record)
        // form.setFieldsValue({ time: record.time })
        // dataRender(record.time)
        console.log(record)
    };
    // 弹出框点击ok
    const handleOk = () => {
        form.submit()
        setConfirmLoading(true);

        setTimeout(() => {
            setOpen(false);
            setConfirmLoading(false);
        }, 100);
    };
    // 弹出框点击取消
    const handleCancel = () => {
        setOpen(false);
    };
    // 定义一个状态用来判断表单是否更改
    const [flag, setFlag] = useState(false)
    // 判断表单是否改动
    const change = () => {
        setFlag(true)
    }
    // 表单提交时执行
    const onFinish = (record) => {
        console.log(record.time)
        axios.patch(`/posts/${record.id}`, { "name": record.name, "context": record.context, "time": record.time }).then((res) => {
            console.log(res.data)
        })
        add().then((res) => {
            setNews(res.data)
        })
    }
    // 时间选择器的改变事件
    const onChanges = (date, dateString) => {
        // console.log(dateString);
        form.setFieldsValue({ 'time': dateString })
    };
    // const dataRender = () => {

    // }
    // 搜索事件
    const onSearch = (value) => {
        // value不为空才可以搜索
        if (value) {
            axios.get(`/posts/?name_like=${value}`).then((res) => {
                console.log(res.data)
                setNews(res.data)
            })
            console.log(value)
        }

    }
    // 添加通告跳路由
    const onpush = () => {
        push('/index/addannun')
    }
    // 批量删除通告
    const dellist = () => {
        console.log(selectedRowKeys)
    }
    return (
        <div>
            <Breadcrumb className='yiqing'>
                <Breadcrumb.Item href='/index'>首页</Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="">疫情通告</a>
                </Breadcrumb.Item>
            </Breadcrumb>

            <Card >
                <Divider orientation="left">疫情通告信息管理</Divider>
                <div className="newsSearch">
                    <Search placeholder="请输入主题名称" onSearch={onSearch} enterButton />
                    <Button onClick={onpush}>
                        添加疫情通告
                    </Button>
                </div>
                {/* <div className="out_btn">

                    <Button disabled={selectedRowKeys.length == 0} onClick={dellist}>
                        <DeleteOutlined />
                    </Button>
                </div> */}
                <Table
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                    columns={columns}
                    pagination={pagination}
                    dataSource={news}
                    onChange={handpagination}
                    expandable
                />
            </Card>
            {/* 编辑的弹出框 */}
            <Modal
                title="编辑公告"
                open={open}
                okText='编辑'
                cancelText='取消'
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <Form
                    form={form}
                    onChange={change}
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 18 }}
                    style={{ marginTop: '-30px' }}
                    onFinish={onFinish}
                >
                    <Form.Item name='id' />
                    <Form.Item
                        name="name"
                        label="主题"
                        rules={[{ required: true, message: '主题不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="context"
                        label="通知"
                        rules={[{ required: true, message: '通知不能为空' }]}
                    >
                        <TextArea rows={4} />
                    </Form.Item>
                    <Form.Item
                        name="people"
                        label="发布者"
                        rules={[{ required: true, message: '发布者不能为空' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name="time"
                        label="时间"
                        rules={[{ required: true, message: '请选择修改时间' }]}
                    >
                        <Space direction="vertical" >
                            <DatePicker onChange={onChanges} />
                        </Space>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default Outbreak;